/*
 * 全时云商务服务股份有限公司.
 * Copyright © 2021 京icp备08005473号. All rights reserved.
 * @Date: 2021-09-02.
 * @Author：
 * @Description 小课堂 - 课程详情 立即报名
 **/
import React, { memo, useState, useEffect } from "react"
import Taro from '@tarojs/taro'
import { AtButton, AtFloatLayout } from 'taro-ui'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'
import Login from "../../components/Login/index"
import signTips from "../../assets/sign-success.png"
import SectionList from "../../components/SectionList/index"

interface Props {
  detailUrl: string // 详情页地址
  id?: string // 设置项的 key值
  label?: string // label
}
/**
 *@Description
 *@Return  课程详情 - 立即报名.
 **/
const CourseDetail: React.FC<Props> = props => {
   console.log("props--CourseDetail----------", props)

   const [open, setOpen] = useState(false) // 是否打开弹窗
   const [hideSign, setHideSign] = useState(false) // 隐藏立即报名
   const [signSuccess, setSignSuccess] = useState(false) // 报名成功标志
   const [entranceMode, setEntranceMode] = useState("code") // 入学方式 - code：入学码、payment：支付凭证


   useEffect(() => {
    Taro.setStorageSync('iphoneNum', '13951925590')
    const iphoneNum = Taro.getStorageSync("iphoneNum")

    if(iphoneNum){
      console.log("已授权iphoneNum----------", iphoneNum)
    } else {
      console.log("未授权iphoneNum----------", iphoneNum)
    }
    getAuthorization()
    getCourseDetail()

   }, [])
   /**
   *@Description scope.record: 录音
  *@Return  小程序 授权.
  **/
  const getAuthorization = () => {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    Taro.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log("授权---res--------------", res)
      },
      complete: (res) => {
        console.log("complete---res--------------", res)
      }
    })

    console.log("小程序 授权----------")
    return false
    // 可以通过 Taro.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
    Taro.getSetting({
      success: function (res) {
        console.log("授权---res--------------", res)

        if (!res.authSetting['scope.userInfo']) {
          Taro.authorize({
            scope: 'scope.userInfo',
            success: function () {
              console.log("授权")
              // 用户已经同意小程序使用录音功能，后续调用 Taro.startRecord 接口不会弹窗询问
              // Taro.startRecord()
            }
          })
        }
      }
    })
  }
   /**
   *@Description
  *@Return  获取课程详情.
  **/
  const getCourseDetail = () => {
    console.log("获取课程详情----------")
    setTimeout(() => {
      setHideSign(true)
    }, 3000)
  }
   /**
   *@Description
  *@Return  立即报名 - 点击事件监听.
  **/
 const handleSignClick = () => {
   setOpen(true)
   setEntranceMode("payment")
 }
  /**
   *@Description
   *@Return  浮动弹层 - 确定按钮.
  **/
 const handleDetermineClick = () => {
  // setOpen(false)
  setSignSuccess(true)
 }
   /**
   *@Description
  *@Return  浮动弹层 - 关闭时触发.
  **/
  const renderCloseClick = () => {
    setOpen(false)
    console.log("22222")
  }
  /**
   *@Description
  *@Return  报名成功之后 - 知道了 按钮点击事件.
  **/
  const handleKnowClick = () => {
    setOpen(false)
    setHideSign(false)
  }

  return (
    <View className='cou-detail'>
      {/* <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> */}
      {/* banner */}
      <View className='cou-banner mt30'>
        <Image src='https://tse3-mm.cn.bing.net/th/id/OIP-C.7n9maUPX84tlG0VV-vHQFAHaEo?pid=ImgDet&rs=1'></Image>
      </View>

      <View className='p1f30'>
        {/* 课程 标题 简介 */}
        <View className='mb40'>
          <View className='cou-card-title'>七年级大科学菁英班</View>
          <View className='cou-introduction'>共10节课程，按步骤强化练习口语语音和技巧，短时间提升英语口语能力。按步骤强化练习口语，间提升按步骤强化练习口语，间提升</View>
        </View>

        <View className='cou-label-info'>
          <Text className='cou-label'>类型</Text>
          <Text className='cou-info'>班课</Text>
        </View>
        <View className='cou-label-info'>
          <Text className='cou-label'>教师</Text>
          <Text className='cou-info green'>姓名老是 <Text className='at-icon at-icon-chevron-right'></Text> </Text>
        </View>
        <View className='cou-label-info'>
          <Text className='cou-label'>类型</Text>
          <Text className='cou-label-name'>班课</Text>
        </View>

        {/* 课程 排课时间 */}
        <View className='mb40 pb120'>
          <View className='cou-card-title'>课程</View>
          <SectionList detailUrl='' status='ing'></SectionList>
          <SectionList detailUrl='' status='coming'></SectionList>
          <SectionList detailUrl='' status='no'></SectionList>
          <SectionList detailUrl='/pages/video/index' status='play'></SectionList>
        </View>

        {/* 分享 - 立即报名 */}
        {hideSign && (
          <View className='cou-share pb65'>
            <View className='cou-icon-share'><Text className='at-icon at-icon-share'></Text>分享</View>
            <View className='cou-sign-up'><AtButton circle type='primary' size='normal' onClick={handleSignClick}>立即报名</AtButton></View>
        </View>
        )}

      </View>

      {/* 登陆弹窗 */}
      <AtFloatLayout isOpened={open} onClose={renderCloseClick}>
          {signSuccess ? (
            // 报名成功
            <View className='cou-sign-success'>
              <Image src={signTips}></Image>
              <Text>报名成功，请等待老师审批通过</Text>
              <View className='cou-know btn88 btn-gray' onClick={handleKnowClick}>知道了</View>
            </View>
          ) : (
            <View>
              {/* 登陆信息 */}
              <View className='cou-float-login'>
                <Text className='cou-login-cancel'>取消</Text> 填写入学信息 <Text className='cou-login-determine' onClick={handleDetermineClick}>确定</Text>
              </View>
              <Login entranceMode={entranceMode}></Login>
            </View>
          )}

        </AtFloatLayout>
    </View>
  )
}

export default memo(CourseDetail)

